

<template>
  <view class="page-container">

    <view class="data-overview">
        <view class="item">
          <text class="volumn">{{ list.taskAmounts }}</text>
          <text class="label">任务总量</text>
        </view>
        <view class="item">
          <text class="volumn">{{ list.completedAmounts }}</text>
          <text class="label">完成任务量</text>
        </view>
        <view class="item">
          <text class="volumn">{{ list.transportMileage }}</text>
          <text class="label">运输里程(km)</text>
        </view>
    </view>
    <zeng-calen :showYearMonth="false"   @onDayClick='onDayClick'>
      
    </zeng-calen>
    <!-- <sl-uni-calendar :show-month="false">
      <view class="data-overview">
        <view class="item">
          <text class="volumn">18</text>
          <text class="label">任务总量</text>
        </view>
        <view class="item">
          <text class="volumn">16</text>
          <text class="label">完成任务量</text>
        </view>
        <view class="item">
          <text class="volumn">3987</text>
          <text class="label">运输里程(km)</text>
        </view>
      </view>
    </sl-uni-calendar> -->
  </view>
</template>

<script setup >
import { getDriverUsersReportAPI } from '../../api/user'
import { ref } from "vue";
const actDay = ref([]) //用户选择的日期


//#region 任务数据
import dayjs from 'dayjs'
const list = ref({})
const getDriverUsersReport = async () => {
  // 获取年
  const year =  dayjs().year()  // 2021  当前为2021年
  // 获取月（注意月份从0开始，所以加1）
  const month = dayjs().month('6').add(1, 'month').format('MM');

  const { data } = await getDriverUsersReportAPI(month, year)
    list.value=data
 }
getDriverUsersReport()
//#endregion

 const  onDayClick=(data)=> {
                let choose = data.date //用户点中的数据
                if (actDay.value.includes(choose)) { //如果用户点击的日期已经存在
                    // 移除元素下标
                    const index = actDay.value.indexOf(choose);
                    //删除用户点击的日期
                    actDay.value.splice(index, 1)
                } 
    }
       

</script>

<style lang="scss" scoped>

 
.data-overview {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  height: 200rpx;
  margin: 40rpx 0;
  // font-size: $uni-font-size-small;
  // color: $uni-main-color;
  background-color: #fff;

  .volumn {
    display: block;
    font-size: 36rpx;
    margin-bottom: 20rpx;
    font-weight: 500;
  }
}
</style>